<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- <style>
        /* 选中所有的p标签 */
        p{
            /* 设置字体颜色 */
            color:red;
            /* 设置字体大小 */
            font-size:30px;
        }
    </style>
    <link rel="stylesheet" href="test.css"> -->
    <!-- <style>
        p.red {
            color: red;
        }
        .green {
            color: green;
        }
        #aaa {
            color: aquamarine;
        }
        /* 空格表示后代 这里表示要满足ul里中找到li,将li设置为红色 */
        ul li{
            color:red;
        }

        /* 2.没空格 表示交集 这里表示p标签和red类都要满足的设置为 红色*/
        p.red {
            color: red;
        }
        /* 3.逗号表示并集 这里表示red类和green类字体都设为 40px  */
        .red, .green{
            font-size: 40px;
        }
        /*4. >表示相邻后代"只能是父子辈(相隔一代)"不能是爷孙辈  */
        ul>li>a{  /*这里表示ul里的li,li中的a标签生效*/
            color: brown;
        }
        /* 将span改为 块级元素 */
        span{
            display: block;
        }

    </style> -->

    <style>
        div {
            border: 1px solid red;
            padding: 20px;
            margin: 40px;
        }
/* 以整个页面的边框为参考边框 ,内边距为100px*/
        html{
            padding:100px
        }
    </style>

 
</head>
<body>
    <div>hello</div>
    <div>hello2</div>

    <!-- <p style="color:blue;font-size: 40px;">hello</p>
    <p>hello1</p>
    <p>hello2</p> -->
    <!-- <span style="color: red ;font-size: 20px;">nihao</span> -->

    <!-- <p class="red">hello</p>
    <p class="green" id="aaa">hello2</p>
    <p class="blue">hello3</p>
    <span class="red">我是一个span</span>
    <div class="green">我是一个div</div> -->
</body>

</html>